<template>
  <view>
    <view class="settle-box">
      <view class="settle-check">
        <radio @click="changeChecked()" :checked="checked" color="#c00000">全选</radio>
      </view>
      <view class="settle-price">
        合计：<text>￥{{price | toFixed}}</text>
      </view>
      <view class="settle-button">
        <button @click="settle()" :disabled="count===0" type="warn">结算({{count}})</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-settle",
    computed: {
      count: function() {
        return this.$store.state.checkCount
      },
      checked: function() {
        return this.$store.state.checked
      },
      price: function() {
        return this.$store.state.price
      }
    },
    data() {
      return {};
    },
    filters: {
      toFixed(num) {
        return Number(num).toFixed(2)
      }
    },
    methods: {
      changeChecked() {
        this.$store.commit('changeAllChecked')
        this.$store.commit('setCheckCount')
        this.$store.commit('setPrice')
      },
      async payMethod() {
        // 1.1定义订单信息
        const orderInfo = {
          // 支付订单的价格
          "order_price": 0.01,
          // 收获地址
          "consignee_addr": this.$store.state.address.provinceName + this.$store.state.address.cityName + this
            .$store
            .state.address.countyName + this.$store.state.address.detailInfo,
          // 商品信息，过滤勾选的商品
          "goods": this.$store.state.cart.filter(item => item.goods_state).map(x => ({
            "goods_id": x.goods_id,
            "goods_number": x.goods_count,
            "goods_price": x.goods_price
          }))
        }
        // 1.2发起请求创建订单
        const {
          data: res
        } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        const order_number = res.message.order_number
        // 2订单预支付
        const {
          data: res1
        } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
          order_number
        })
        if (res1.meta.status !== 200) {
          return uni.$showMsg()
        }
        const pay = res1.message.pay
        // 调用uniapp的接口发起微信支付
        uni.requestPayment({
          ...pay,
          success(res) { //支付失败
            console.log(res)
          },
          fail(res) { //支付成功,之后应该清空购物车.....
            console.log(res)
          }
        })
      },
      settle() {
        if (Object.keys(this.$store.state.token).length === 0) {
          let i = 3
          const s1 = setInterval(() => {
            uni.$showMsg(`请登录之后再结算！${i}秒之后自动跳转到登录页面`)
            i--
            if (i < 0) {
              clearInterval(s1)
              this.$store.commit('setBackInfo', "/pages/cart/cart")
              uni.switchTab({
                url: "/pages/my/my"
              })
            }
          }, 1000)
          return
        }
        if (Object.keys(this.$store.state.address).length === 0) {
          return uni.$showMsg("地址不能为空")
        }
        this.payMethod()
      }
    }
  }
</script>

<style lang="scss">
  .settle-box {
    padding-left: 10rpx;
    width: 100%;
    height: 100rpx;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    background-color: white;
    position: fixed;
    align-items: center;
    left: 0;
    bottom: 0;
    font-size: 14px;

    .settle-check {}

    .settle-price {
      text {
        color: #c00000;
        font-weight: 900;
      }
    }

    .settle-button {
      button {
        width: 250rpx;
        height: 100rpx;
        font-size: 14px;
        line-height: 100rpx;
        text-align: center;
      }
    }
  }
</style>